<template>
  <div class="organization-manage w-full h-full">
    <div class="btns">
      <a-button @click="newCreate" type="primary">新增</a-button>
      <a-button @click="modify" type="primary" :disabled="table.rowSelection.selectedRowKeys.length<1">修改</a-button>
      <a-button @click="newDelete" type="primary" :disabled="table.rowSelection.selectedRowKeys.length<1">删除</a-button>
    </div>
    <a-table
      style="height: calc(100% - 40px);overflow-y:auto;"
      :rowKey="record => record.id"
      :columns="table.columns"
      :data-source="table.dataSource"
      :row-selection="table.rowSelection"
      :pagination="table.pagination"
    >
    </a-table>
  </div>
</template>

<script>
import moment from 'moment'
import orupService from '@/api/orupService'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    width: '30%'
  },
  {
    title: '排序',
    align: 'center',
    dataIndex: 'order',
    width: '20%'
  },
  {
    title: '组织代码',
    align: 'center',
    dataIndex: 'code',
    width: '50%'
  }
]

export default {
  name: 'OrganizationManage',

  data () {
    return {
      filter: {
        filterText: '',
        pageIndex: 1,
        pageSize: 10
      },
      table: {
        columns: columns,
        dataSource: [],
        rowSelection: {
          selectedRowKeys: [],
          selectedRow: {},
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys.length ? [selectedRowKeys.pop()] : []
            this.table.rowSelection.selectedRow = selectedRows.length ? selectedRows.pop() : {}
          }
        },
        pagination: {
          pageSize: 10,
          total: 0,
          current: 1,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
          showTotal: (total) => `共${total}条数据`,
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
          }
        }
      }
    }
  },

  mounted () {
    this.loadData()
  },

  methods: {
    moment,
    async loadData () {
      this.table.dataSource = await orupService.orgManageTreeQuery({})
    },
    newCreate () {
      this.showDialog()
    },
    modify () {
      this.showDialog(this.table.rowSelection.selectedRow)
    },
    showDialog (record) {
      const _this = this
      this.$dialog({
        title: '新建组织',
        content: () => import('@v/investmentOnline/systemManage/dialog/OrganizationDialog.vue'),
        width: 500,
        bodyStyle: {
          height: '300px'
        },
        props: {
          record: record
        },
        centered: true,
        maskClosable: false,
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            if (dialogCtl.onSubmit()) {
              if (record && record.id) {
                orupService.orgManageUpdate(dialogCtl.form).then(res => {
                  if (res && res.id) {
                    _this.loadData()
                    _this.$message.success('修改成功!')
                    _this.table.rowSelection.selectedRowKeys = []
                    _this.table.rowSelection.selectedRow = {}
                  }
                })
              } else {
                orupService.orgManageSave(dialogCtl.form).then(res => {
                  if (res && res.id) {
                    _this.$message.success('添加成功!')
                    _this.loadData()
                  }
                })
              }
              ctl.closeDialog()
            }
          }
        }
      })
    },
    newDelete () {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确认删除该数据吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const row = _this.table.rowSelection.selectedRow
          orupService.orgManageDelete(row).then(res => {
            if (res) {
              _this.loadData()
              _this.$message.success('删除成功!')
              _this.table.rowSelection.selectedRowKeys = []
              _this.table.rowSelection.selectedRow = {}
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.organization-manage {
  padding: 10px;
  background: #fff;
  .btns {
    height: 40px;
  }
}

</style>
